<template>
    <div class="picture" :style="{ height: defaultHeight }" >
        <img class="child" :src="picture.imageUrl" :alt="picture.title" @load="onImageLoad" />
        <p>{{ getTitle(picture.title) }}</p>
    </div>
</template>

<script setup>
import { defineProps,ref } from 'vue';
const defaultHeight = ref("300px")
const props = defineProps({
    picture: Object
})
function getTitle(title) {
    if (title.length > 10) {
        return title.slice(10).concat('...')
    }
    return title
}
function onImageLoad() {
    defaultHeight.value = 'auto'; // 图片加载后移除默认高度
}
</script>

<style scoped>
div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 300px;
    transition: height 0.3s;
}

.child {
    width: 200px;
    height: 100%;
    object-fit: cover;
}

.child:not([src]) {
  /* 如果图片没有src属性，则不显示 */
  display: none;
}
 
.child:not(.error-image) {
  /* 当图片加载失败时，添加error-image类 */
  opacity: 1;
}
</style>